<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>首页 - 驴妈妈流立方</title>
	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<!-- ace scripts -->
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<!-- validator scripts -->
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<!-- user scripts -->
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
	<!-- text fonts -->
	<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
	<!-- BootstrapValidator -->
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
	<!-- ace styles -->
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css">
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css">
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
	<!-- ace settings handler -->
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
	<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />
	<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
</head>
<style>
	.pageUrl_td{
		border-bottom: none !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: 54px;
		height: 54px;
		box-sizing: border-box;
	}
	.pageUrl_td a{
		text-decoration: none;
		color: inherit;
	}
	th{
		text-align: center;
	}

	td .urlDiv {
		display: none;
	}

	td:hover .urlDiv {
		display: block;
		position: absolute;
		z-index: 3;
		background: rgba(17, 17, 17, 0.9);
		border-radius: 4px;
		color: #fff;
		width: 25%;
		font-size: 12px;
		padding: .5em 1em;
		word-break: break-all;
		margin-bottom: 11px;
		text-align: left;
	}

	s {
		position: absolute;
		top: -10px;
		*top: -12px;
		left: 25px;
		display: block;
		height: 0;
		width: 0;
		font-size: 0;
		line-height: 0;
		border-color: transparent transparent rgba(17, 17, 17, 0.9) transparent;
		border-style: dashed dashed solid dashed;
		border-width: 5px;
	}
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
		border-top: 2px solid #C6487E!important;
	}
	#summary {
		padding: 30px 0;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		border: 1px solid #CCC
	}
	table.summary tr td span.text {
		color: #787a7d;
	}
	table.summary {
		table-layout: fixed;
		width: 100%
	}
	table.summary tr td div.value {
		margin-top: 12px;
		font-size: 24px;
		color: #54becc;
	}
	table.summary tr td{
		text-align: center;
	}
	
</style>
<body class="no-skin" style="background-color: #FFF;">
<div class="page-content">
	<div class="tabbable">
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a data-toggle="tab" href="#manage" onclick="statistics('#manage');"aria-expanded="false"> 着陆页详情 </a></li>
			<li class=""><a data-toggle="tab" href="#statistics" aria-expanded="true" onclick="statistics('#statistics');"> 着陆页排名 </a></li>
		</ul>

		<div class="tab-content">
			<div id="manage" class="tab-pane active in">
				<div class="row">
					<div class="col-xs-12">
						<div class="row">
							<div class="col-xs-12">
								<!-- style="margin-bottom: 0px; border-bottom: 0px;" -->
								<div class="widget-box">
									<div class="widget-header widget-header-small">
										<h5 class="widget-title lighter">筛选条件</h5>
									</div>
									<div class="widget-body" style="background-color: #EFF3F8;">
										<div class="widget-main">
											<form class="form-inline" id="searchForm" method="post"
												  action="#">
												<div class="form-group">
													<label for="exampleInputName2">选择时段</label> <input
														type="text" id="config-demo" name="chooseTime"
														id="chooseTime" class="form-control time">
													<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span> 昨日
													</button>
													<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span> 过去7天
													</button>
													<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span> 过去31天
													</button>
												</div>
												<div class="form-group">
													<label>流量类型</label>
													<div class="btn-group">
														<label class="btn btn-sm btn-link">
															<input type="radio" name="page_type_flow" checked  value="internalFlow" id="internalFlow">内部流量
														</label>
														<label class="btn btn-sm btn-link">
															<input type="radio" name="page_type_flow" value="outFlow" id="outFlow">外部流量
														</label>
													</div>
												</div>
												<div class="form-group" id="selectPlatform">
													<label for="exampleInputName2">平台</label>
													<select  class="chosen-select" tabindex="2" name="plat_form" id="plat_form">
														<option value="">全部</option>
														<option value="PC">PC</option>
														<option value="wap">WAP</option>
														<option value="ios" selected>IOS</option>
														<option value="android">ANDROID</option>

													</select>
												</div>
												<div class="form-group" id="selectChannel1" style="display: none">
													<label for="exampleInputName2">渠道1</label>
													<select data-placeholder="" class="chosen-select" tabindex="2"
															name="channel1" id="channel1" onchange="changeChannel1(this);">
													</select>
												</div>
												<div class="form-group" style="display: none" id="selectChannel2">
													<label for="exampleInputName2">渠道2</label>
													<select data-placeholder="" class="chosen-select" tabindex="2"
															name="channel2" id="channel2">
													</select>
												</div>
												<div class="form-group">
													<button id="search" type="button" onclick="searchClick();"
															class="btn btn-pink btn-sm">
														<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>Search
													</button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!----------------------------------- 着陆页图标------------------------->
						<div class="row">
							<div class="col-xs-12">
								<div id="summary" class="section ">
									<table class="summary">
										<tbody>
											<tr>
												<td>
													<span class="text">平均访问时长
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>总访问时长/访问次数（Session)<span class="content_name"></span><s></s></span>
														</label>
													</span>
													<div class="value summary-ellipsis" title=""><span id="avg_access_time"></span></div>
												</td>
												<td>
													<span class="text">平均访问深度
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>浏览总量PV/访问次数（Session)<span class="content_name"></span><s></s></span>
														</label>
													</span>
													<div class="value summary-ellipsis" title=""><span id="avg_access_depth"></span></div>
												</td>
												<td>
													<span class="text">访问着陆页次数
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>一定时间内，所有的到达该着落页session总数即为访问次数<span class="content_name"></span><s></s></span>
														</label>
													</span>
													<div class="value summary-ellipsis" title=""><span id="access_amount"></span></div>
												</td>
												<td>
													<span class="text">跳出率
														<label class="help_img">
															<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
															<span class='tips'>>在一定时间内，跳出的sessio总数/所有的到达该着落页session总数即为跳出率<span class="content_name"></span><s></s></span>
														</label>
													</span>
													<div class="value summary-ellipsis" title=""><span id="exit_rate"></span></div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row" id="detail-table">
							<div class="col-xs-12">
								<div class="fold" style="text-align: center;border-top: 0px;margin-top: 10px;margin-bottom: 10px;">
									<a href="#" class="bigger-140 show-details-btn">
										<i class="ace-icon fa fa-angle-double-up"></i>
										<span class="sr-only">Details</span>
									</a>
								</div>
							</div>
						</div>
						<div class="row" id="chart-div">
							<div class="col-sm-12">
								<div class="col-sm-4 widget-box" style="padding: 0 0 0 0!important;">
									<div class="widget-header widget-header-small">
										<h4 style="color:#000;"><span>所选着陆页为入口的访问深度图</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
												<span class='tips'>用户从到达着陆页，至离开驴妈妈系统，一次完成的session结束，访问的页面数量之和<span class="content_name"></span><s></s></span>
											</label>
										</h4>
									</div>
									<div class="widget-body">
										<div id="visitDepth" style="width: 100%; height: 500px; margin: 0 auto;"></div>
									</div>
								</div>
								<div class="col-sm-4 widget-box" style="padding: 0 0 0 0!important;">
									<div class="widget-header widget-header-small">
										<h4 style="color:#000;"><span>所选着陆页为入口的访问时长图</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
												<span class='tips'>用户从到达着陆页，至离开驴妈妈系统，一次完整的session结束，定义为一次访问,所经历的时间间隔即为该用户的访问时长<span class="content_name"></span><s></s></span>
											</label>
										</h4>
									</div>
									<div class="widget-body">
										<div id="visitTime" style="width: 100%; height: 500px; margin: 0 auto;"></div>
									</div>
								</div>
								<div class="col-sm-4 widget-box" style="padding: 0 0 0 0!important;">
									<div class="widget-header widget-header-small">
										<h4 style="color:#000;"><span>区域分布图</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
												<span class='tips'>一段时间内着陆页来源于各省份用户的占比<span class="content_name"></span><s></s></span>
											</label>
										</h4>
										
									</div>
									<div class="widget-body">
										<div id="areaDistribution" style="height:500px;"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- -----------着陆页详情tab -------------------------------------------->
						<div class="row" id="detail-table">
							<div class="col-xs-12">
								<table  id="simple-table" class="table table-striped table-bordered table-hover dataTable">
									<thead>
									<tr id="landPageTabTr"></tr>
									</thead>
									<tbody id="landPageTabBody"></tbody>
								</table>
								<div class="ui-jqgrid1">
									<div id="grid-pager1"
										 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
										 dir="ltr">
										<div id="pg_grid-pager1" class="ui-pager-control" role="group">
											<input type="text" id="currentPage_detail" hidden="true" value=1>
											<input type="text" id="page_size_detail" value =10 hidden="true">
											<input type="text" id="page_total_detail" hidden="true">
											<table cellspacing="0" cellpadding="0" border="0"
												   class="ui-pg-table"
												   style="width: 100%; table-layout: fixed; height: 100%;"
												   role="row">
												<tbody>
												<tr>
													<td id="grid-pager_left1" align="left"></td>
													<td id="grid-pager_center1" align="center"
														style="white-space: pre; width: 343px;"><table
															cellspacing="0" cellpadding="0" border="0"
															style="table-layout: auto;" class="ui-pg-table">
														<tbody>
														<tr>
															<td id="first_grid-pager1"
																onclick="showPageDetail('firstPage')"
																class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
															<td id="prev_grid-pager1"
																onclick="showPageDetail('prePage')"
																class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
															<td dir="ltr">Page <input class="ui-pg-input" id="page_num1"
																					  type="text" size="2" maxlength="7" disabled="true"
																					  value="${page.pageNum!}" role="textbox"> of <span
																	id="sp_1_grid-pager1">${page.pages!}</span></td>
															<td id="next_grid-pager1"
																onclick="showPageDetail('nextPage')"
																class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
															<td id="last_grid-pager1"
																onclick="showPageDetail('lastPage')"
																class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
														</tr>
														</tbody>
													</table></td>

													<td id="grid-pager_right1" align="right">
														<div dir="ltr" style="text-align: right" class="ui-paging-info">View
															<span id="view_start_row1"></span> - <span id="view_end_row1"></span>
															of <span id="view_page_total1"></span>
														</div>
													</td>
												</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- ------------------------------------------着陆页排名 -------------------------------------->
			<div id="statistics" class="tab-pane" style="display:none;">
				<div class="row">
					<div class="col-xs-12">
						<!-- style="margin-bottom: 0px; border-bottom: 0px;" -->
						<div class="widget-box">
							<div class="widget-header widget-header-small">
								<h5 class="widget-title lighter">筛选条件(数据来源v7.8.1及以后版本)</h5>
							</div>
							<div class="widget-body" style="background-color: #EFF3F8;">
								<div class="widget-main">
									<form class="form-inline" id="searchForm2" method="post"
										  action="#">
										<input type="text" id="currentPage" hidden="true" value=1>
										<input type="text" id="page_size" value =10 hidden="true">
										<input type="text" id="page_total" hidden="true">
										<div class="form-group">
											<label for="exampleInputName2">选择时段</label>
											<input type="text" id="config-demo2" class="form-control time">
											<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>过去7天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>过去31天
											</button>
										</div>
										<div class="form-group" style="padding-left: 15px;">
											<label>流量类型</label>
											<div class="btn-group">
												<label class="btn btn-sm btn-link">
													<input type="radio" name="page_type_flow2" checked value="internalFlow" onclick="displaySelectBox('internalFlow')">内部流量
												</label>
												<label class="btn btn-sm btn-link">
													<input type="radio" name="page_type_flow2" value="outFlow" onclick="displaySelectBox('outFlow')">外部流量
												</label>
											</div>
										</div>
										<div class="form-group"  id="selectPlatform2" style="padding-left: 15px;">
											<label for="exampleInputName2">平台</label>
											<select data-placeholder="" class="chosen-select" tabindex="2" name="plat_form2" id="plat_form2">
												<option value="">全部</option>
												<option value="PC">PC</option>
												<option value="wap">WAP</option>
												<option value="ios">IOS</option>
												<option value="android">ANDROID</option>
											</select>
										</div>
										<div class="form-group" id="selectChannel21" style="display: none" style="padding-left: 15px;">
											<label for="exampleInputName2">渠道1</label>
											<select data-placeholder="" class="chosen-select" tabindex="2"
													name="channel1" id="channel21" onchange="changeChannel2(this);">
											</select>
										</div>
										<div class="form-group" style="display: none" id="selectChannel22" style="padding-left: 15px;">
											<label for="exampleInputName2">渠道2</label>
											<select data-placeholder="" class="chosen-select" tabindex="2"
													name="channel22" id="channel22">
											</select>
										</div>
										<div class="form-group">
											<label for="exampleInputName2">访问类型</label>
											<div class="btn-group">
												<label class="btn btn-sm btn-link">
													<input type="radio" name="isMatch" checked value="PV">PV
												</label>
												<label class="btn btn-sm btn-link">
													<input type="radio" name="isMatch" value="UV"> UV
												</label>
											</div>
										</div>
										<div class="form-group" style="padding-left: 25px;">
											<button id="searchlist" type="button" class="btn btn-pink btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
											</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- ------------------着陆页排名tab --------------------------------->
				<div class="row">
					<div class="col-xs-12">
						<table id="simple-table" class="table table-striped table-bordered table-hover">
							<thead id="rankTrTab"></thead>
							<tbody id="rankBodyTab"> </tbody>
						</table>
						<div class="ui-jqgrid">
							<div id="grid-pager"
								 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
								 dir="ltr">
								<div id="pg_grid-pager" class="ui-pager-control" role="group">
									<table cellspacing="0" cellpadding="0" border="0"
										   class="ui-pg-table"
										   style="width: 100%; table-layout: fixed; height: 100%;"
										   role="row">
										<tbody>
										<tr>
											<td id="grid-pager_left" align="left"></td>
											<td id="grid-pager_center" align="center"
												style="white-space: pre; width: 343px;"><table
													cellspacing="0" cellpadding="0" border="0"
													style="table-layout: auto;" class="ui-pg-table">
												<tbody>
												<tr>
													<td id="first_grid-pager"
														onclick="showPage('firstPage')"
														class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
														style="cursor: pointer;"><span
															class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
													<td id="prev_grid-pager"
														onclick="showPage('prePage')"
														class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
														style="cursor: pointer;"><span
															class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
													<td dir="ltr">Page <input class="ui-pg-input" id="page_num"
																			  type="text" size="2" maxlength="7" disabled="true"
																			  value="${page.pageNum!}" role="textbox"> of <span
															id="sp_1_grid-pager">${page.pages!}</span></td>
													<td id="next_grid-pager"
														onclick="showPage('nextPage')"
														class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
														style="cursor: pointer;"><span
															class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
													<td id="last_grid-pager"
														onclick="showPage('lastPage')"
														class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
														style="cursor: pointer;"><span
															class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
												</tr>
												</tbody>
											</table></td>
											<td id="grid-pager_right" align="right">
												<div dir="ltr" style="text-align: right" class="ui-paging-info">View
													<span id="view_start_row"></span> - <span id="view_end_row"></span>
													of <span id="view_page_total"></span>
												</div>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<input id="sort" type="hidden" value="0"/>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
		src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
<script type="text/javascript"
		src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
<script type="text/javascript"
		src="${rc.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript"
		src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
<script type="text/javascript">
	d3.select(self.frameElement).style("height", "1400px");
	var option1;
	var option2;
	jQuery(function($) {
		searchClick();
		/* 数值每3位，逗号隔开 */
		function formatNum(strNum) {
			if (strNum.length <= 3) {
				return strNum;
			}
			if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
				return strNum;
			}
			var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
			var re = new RegExp();
			re.compile("(\\d)(\\d{3})(,|$)");
			while (re.test(b)) {
				b = b.replace(re, "$1,$2$3");
			}
			return a + "" + b + "" + c;
		}

		option1 = {
			color: ['#3398DB'],
			title : {
				text : '',
				left : 'center',
				top : '2%'
			},
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				},
				formatter :'{a}{b} <br/>访问页面数 : {c}'
			},
			grid: {
				left: '3%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					name : '访问页面数',
					data : [],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis : [
				{
					type : 'value',
					name : '访问人数/次'
				}
			],
			series : [
				{
					name:'访问深度',
					type:'bar',
					barWidth: '60%',
					label: {
						normal: {
							show: true,
							position: 'top',
							formatter: function(p){
								return formatNum(p.value);
							}
						}
					},
					data:[]
				}
			]
		};

		option2 = {
			color: ['#3398DB'],
			title : {
				text : '',
				left : 'center',
				top : '2%'
			},
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				},
				formatter :'{a}{b}/s <br/>访问人数 : {c}'
			},
			grid: {
				left: '3%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					name : '访问时长/s',
					data : [],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis : [
				{
					type : 'value',
					name : '访问人数/次'
				}
			],
			series : [
				{
					name:'访问时长',
					type:'bar',
					barWidth: '60%',
					label: {
						normal: {
							show: true,
							position: 'top',
							formatter: function(p){
								return formatNum(p.value);
							}
						}
					},
					data:[]
				}
			]
		};
	});

	function statistics(obj){
		if(obj == '#manage'){
			$('#manage').show();
			$("#statistics").hide();
			searchClick();
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		}else if(obj == '#statistics'){
			$('#statistics').show();
			$("#manage").hide();
			$("#searchlist").click();
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		}
	}

	function datarefresh(flow_type,plat_form,channel1,channel2,chooseTime){
		$.ajax({
			url: "${rc.contextPath}/traffic/landingPage",
			data:{"flow_type":flow_type,"plat_form":plat_form,"channel1":channel1,"channel2":channel2,"chooseTime":chooseTime},
			dataType:"json",
			beforeSend: function(){
				$("#search").attr("disabled",true);
				openPartialLayer($("#visitDepth"));
				openPartialLayer($("#visitTime"));
			},
			complete: function(){
				$("#search").attr("disabled",false);
				removeLoading($("#visitDepth"));
				removeLoading($("#visitTime"));
			},
			success: function(data){
				if(data!=null){
					var depthxAxis=data.depthxAxis;
					var depthseries=data.depthseries;
					var timexAxis=data.timexAxis;
					var timeseries=data.timeseries;
					var bounce_rate = data.bounce_rate;
					var amount = data.amount;
					var arr2 = [];
					for(var i=0;i<timexAxis.length;i++){
						if(timeseries[i] != null){
							arr2.push({name:timexAxis[i],value:timeseries[i]});
						}
					}
					var defs2 = {
						'name':{
							alias: '访问时长'
						},
						'value': {
							alias: '访问人数'
						}
					};
					var chart2 = chartModal(arr2,'visitTime',defs2);
					var arr1 = [];
					for(var i=0;i<depthxAxis.length;i++){
						if(depthseries[i] != null) {
							arr1.push({name: depthxAxis[i], value: depthseries[i]});
						}
					}
					var defs1 = {
						'name':{
							alias: '访问深度'
						},
						'value': {
							alias: '访问页面数'
						}
					};
					var chart1 = chartModal(arr1,'visitDepth',defs1);
					chart1.on('tooltipchange', function(ev) {
						var items = ev.items; // tooltip显示的项
						var origin = items[0]; // 将一条数据改成多条数据
						items.splice(0); // 清空
						items.push({
							name: '访问深度',
							title: origin.title,
							marker: true,
							color: origin.color,
							value: origin.name
						});
						items.push({
							name: '访问页面数',
							marker: true,
							title: origin.title,
							color: origin.color,
							value: origin.value
						});
					});
					chart2.on('tooltipchange', function(ev) {
						var items = ev.items; // tooltip显示的项
						var origin = items[0]; // 将一条数据改成多条数据
						items.splice(0); // 清空
						items.push({
							name: '访问时长',
							title: origin.title,
							marker: true,
							color: origin.color,
							value: origin.name+'/s'
						});
						items.push({
							name: '访问人数',
							marker: true,
							title: origin.title,
							color: origin.color,
							value: origin.value
						});
					});
					$("#exit_rate")[0].innerText=bounce_rate+"%";
					$("#access_amount")[0].innerText=amount+"次";

					$("#avg_access_time").html(data.avg_access_time + "s");
					$("#avg_access_depth").html(data.avg_access_depth);
				}
			}
		});
	}

	function chartModal(data,id,defs){
		$("#"+id).html("");
		var chart = new G2.Chart({
			id: id,
			forceFit: true,
			height: 500
		});
		chart.source(data,defs);
		chart.legend(false);
		chart.tooltip(true, {
			title: null // 默认标题不显示
		});
		chart.interval().position('name*value').color('name').label('value');
		chart.render();
		if(data == null || data.length == 0){
			tips(id,500);
		}
		return chart;
	}
	function regionData(flow_type,plat_form,channel1,channel2,chooseTime){
		$.ajax({
			url: "${rc.contextPath}/traffic/regionData",
			data:{"flow_type":flow_type,"plat_form":plat_form,"channel1":channel1,"channel2":channel2,"chooseTime":chooseTime},
			dataType:"json",
			beforeSend: function(){
				$("#search").attr("disabled",true);
				openPartialLayer($("#areaDistribution"));
			},
			complete: function(){
				$("#search").attr("disabled",false);
				removeLoading($("#areaDistribution"));
			},
			success: function(data){
				if(data!=null){
					var dataLegent = data.regionList;
					var regionMap = data.regionMap;
					var arr = [];
					$.each(regionMap,function(key,value){
						arr.push({name:key,value:value});
					});
					var exportForm={
						'headers':['区域','访问次数（次）'],
						'cols':['name','value']
					}
					pieChartModal(arr,'areaDistribution','name','value',500,"",exportForm);
					/*myChart3 =  makePiePic("","列出所有有区域的省份，并计算占比",dataLegent,regionMap,"areaDistribution");

					window.onresize = function(){
						myChart3.resize();
					}*/
				}
			}
		});
	}

	function tabData(flow_type,plat_form,channel1,channel2,chooseTime,start_num,page_size,flag,sort){
		$.ajax({
			url: "${rc.contextPath}/traffic/landingPageByNum",
			data:{"sort":sort,"flow_type":flow_type,"plat_form":plat_form,"channel1":channel1,"channel2":channel2,"chooseTime":chooseTime,"start_num":start_num,"page_size":page_size},
			dataType:"json",
			beforeSend: function(){
				$("#search").attr("disabled",true);
			},
			complete: function(){
				$("#search").attr("disabled",false);
			},
			success: function(data){
				if(data!=null){
					var trContent = "";
					var bodyContent = "";
					var page=data.page;
					if(page.pages>1){
						$("#page_total_detail").val(page.pages);
						$("#currentPage_detail").val(page.pageNum);
						$("#page_num1").val(page.pageNum);
						$("#sp_1_grid-pager1")[0].innerText=page.pages;
						$("#view_start_row1")[0].innerText= page.startRow;
						$("#view_end_row1")[0].innerText= page.endRow;
						$("#view_page_total1")[0].innerText= page.total;
						$(".ui-jqgrid1").show();
					}else{
						$(".ui-jqgrid1").hide();
					}
					var platcode="全平台";
					if(flow_type == "internalFlow"){
						trContent = "<th>序号</th>"+
								"<th>平台</th>"+
								"<th>页面名称</th>"+
								"<th>UV</th>"+
								"<th>PV</th>"+
								"<th>IP数</th>"+
								"<th class='sort' id='sortClass' onclick='sortByRate()'>页面跳出率</th>";
						$.each(data.page.list,function(n,value) {
							if(value.platform_code !=""){
								platcode= value.platform_code;
							}
							bodyContent += "<tr><td>"+ (n+1) +"</td>"+
									"<td>"+ platcode +"</td>"+
									"<td>"+ value.page_name +"</td>"+
									"<td>"+ value.uv +"</td>"+
									"<td>"+ value.pv +"</td>"+
									"<td>"+ value.ip +"</td>"+
									"<td>"+ value.bounceRate +"%" +"</td>"+
									"</tr>";
						});
					}else{
						if(channel1.split("_")[1] == "12h"){
							trContent = "<th>序号</th>"+
									"<th>渠道</th>"+
									"<th>页面名称</th>"+
									"<th>页面地址</th>"+
									"<th>UV</th>"+
									"<th>PV</th>"+
									"<th>IP数</th>"+
									"<th>页面跳出率</th>";
							$.each(data.page.list,function(n,value) {
								bodyContent += "<tr><td>"+ (n+1) +"</td>"+
										"<td>"+ value.channel_code +"</td>"+
										"<td>"+ value.page_name +"</td>"+
										"<td class='pageUrl_td'>"+
										"<a href='javascript:;' title='"+value.page_urls+"'>"
										+ value.page_urls +"</a><div class='urlDiv'>"+value.page_urls+"<s></s></div>"+
										"</td>"+
										"<td>"+ value.uv +"</td>"+
										"<td>"+ value.pv +"</td>"+
										"<td>"+ value.ip +"</td>"+
										"<td>"+ value.bounceRate+"%" +"</td>"+
										"</tr>";
							});
						}else{
							trContent = "<th>序号</th>"+
									"<th>渠道</th>"+
									"<th>UV</th>"+
									"<th>PV</th>"+
									"<th>IP数</th>"+
									"<th>入站率</th>"+
									"<th>页面跳出率</th>";
							$.each(data.page.list,function(n,value) {
								bodyContent += "<tr><td>"+ (n+1) +"</td>"+
										"<td>"+ value.channel_code +"</td>"+
										"<td>"+ value.uv +"</td>"+
										"<td>"+ value.pv +"</td>"+
										"<td>"+ value.ip +"</td>"+
										"<td>"+ value.outRate +"%"+"</td>"+
										"<td>"+ value.bounceRate+"%" +"</td>"+
										"</tr>";
							});
						}
					}
					if(bodyContent == ""){
						bodyContent='<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
					}
					$("#landPageTabTr").html(trContent);
					$("#landPageTabBody").html(bodyContent);
					if(start_num == 1 && flag == 0){
						regionData(flow_type,plat_form,channel1,channel2,chooseTime);
						datarefresh(flow_type,plat_form,channel1,channel2,chooseTime);
					}
					
					if(sort==1){
						$("#sortClass").attr("class","sorting_asc");
					}else{
						$("#sortClass").attr("class","sorting_desc");
					}
				}
			}
		});
	}

	function showPageDetail(param) {
		var chooseTime=$("#config-demo").val();
		var flow_type = $("input[name='page_type_flow']:checked").val();
		var plat_form =$("#plat_form").val();//平台
		var channel1 = $("#channel1").val();
		var channel2 = $("#channel2").val();
		var endrow = parseInt($("#sp_1_grid-pager1")[0].innerText);
		var currentPage = parseInt($("#currentPage_detail").val());
		var page_size = $("#page_size_detail").val();
		var sort = $("#sort").val();
		var flag = 0;
		if('firstPage'==param) {
			currentPage =1;
		}
		else if('prePage'==param) {
			if(currentPage==1){
				currentPage ==1;
				flag = 1;
			}else{
				currentPage = currentPage-1;
			}
		}
		else if('nextPage'==param) {
			if(currentPage==endrow){
				currentPage = endrow;
				flag = 1;
			}else{
				currentPage = currentPage+1;
			}
		} else if('lastPage'==param) {
			currentPage = endrow;
		}
		if(flag==0){
			tabData(flow_type,plat_form,channel1,channel2,chooseTime,currentPage,page_size,1,sort);
		}
	}

	function searchClick(){
		var chooseTime=$("#config-demo").val();
		var flow_type = $("input[name='page_type_flow']:checked").val();
		var plat_form =$("#plat_form").val();//平台
		var channel1 = $("#channel1").val();
		var channel2 = $("#channel2").val();
		var page_size = $("#page_size_detail").val();
		var sort = $("#sort").val();
		tabData(flow_type,plat_form,channel1,channel2,chooseTime,1,page_size,0,sort);
	}

	$("#internalFlow").click(function(){
		$("#selectPlatform").show();
		$('.chosen-select').chosen("destroy").chosen();
		$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		$("#selectChannel1").hide();
		$("#selectChannel2").hide();
	});
	$("#internalFlow").click();

	$("#outFlow").click(function(){
		$("#selectPlatform").hide();
		$("#plat_form").val("");
		$("#selectOperation").hide();
		$("#selectPage").hide();
		$("#selectChannel1").show();
		$("#selectChannel2").show();

		$("#channel2").attr("disabled",true);
		$('.chosen-select').chosen("destroy").chosen();
		$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		getChannelChild(3,1);
	});

	////////////////////////////着陆页排名////////////////////////////////
	$("#searchlist").click(function() {
		var chooseTime=$("#config-demo2").val();
		var flow_type = $("input[name='page_type_flow2']:checked").val();
		var plat_form =$("#plat_form2").val();//平台
		var channel1 = $("#channel21").val();
		var channel2 = $("#channel22").val();
		var ismatch= $("input[name='isMatch']:checked").val();
		var currentPage=1;//当前页面
		var page_size=$("#page_size").val();//页面大小

		queryList(chooseTime,ismatch,plat_form,currentPage,page_size,channel1,channel2,flow_type);
	});

	function queryList(chooseTime,ismatch,plat_form,currentPage,page_size,channel1,channel2,flow_type) {
		$.ajax({
			data: {
				"chooseTime":chooseTime,
				"ismatch":ismatch,
				"plat_form":plat_form,
				"channel1":channel1,
				"channel2":channel2,
				"currentPage":currentPage,
				"page_size":page_size,
				"flow_type":flow_type
			},
			url: "${rc.contextPath}/traffic/querylist",
			beforeSend: function(){
				$("#searchlist").attr("disabled",true);
			},
			complete: function(){
				$("#searchlist").attr("disabled",false);
			},
			success: function(data){
				$("table").show();
				$("#data").empty();
				$("#rankTrTab").empty();
				$("#rankBodyTab").empty();
				var trContent = "";
				var bodeContent = "";
				if(flow_type == "internalFlow"){
					trContent = "<tr>"+
							"<th>序号</th>"+
							"<th>平台</th>"+
							"<th>页面名称</th>"+
							"<th>访问次数</th>";
					if(ismatch == 'PV'){
						trContent += "<th>退出率</th>"
					}else{
						trContent += "<th>跳出率</th>"
					}
					trContent += "</tr>";
				}else{
					trContent = "<tr>"+
							"<th>序号</th>"+
							"<th>渠道1</th>"+
							"<th>渠道2</th>"+
							"<th>页面名称</th>"+
							"<th>访问次数</th>";
					if(ismatch == 'PV'){
						trContent += "<th>退出率</th>"
					}else{
						trContent += "<th>跳出率</th>"
					}
					trContent += "</tr>";
				}
				if(data==null||data==""||data.flowlist==0||data.page==null) {
					bodeContent='<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
					$(".ui-jqgrid").hide();
				}else {
					$(".ui-jqgrid").show();
					var dataList=data.flowlist;
					var pageBar=data.pageBar;
					var page=data.page;
					$("#page_total").val(page.pages);
					$("#currentPage").val(page.pageNum);
					$("#page_num").val(page.pageNum);
					$("#sp_1_grid-pager")[0].innerText=page.pages;
					$("#view_start_row")[0].innerText= page.startRow;
					$("#view_end_row")[0].innerText= page.endRow;
					$("#view_page_total")[0].innerText= page.total;
					if(flow_type == "internalFlow"){
						for(i=0;i<dataList.length;i++) {
							var index = i + 1;
							bodeContent +="<tr><td>"+ index +"</td>"+"<td>"+dataList[i].platform_code+"</td>"+"<td>"
									+dataList[i].page_code+"</td>"+"</td>"+"<td>"+dataList[i].amount+"</td>"+"<td>"
									+rate(dataList[i].bounce_amount,dataList[i].amount)+"%</td></tr>";
						}
					}else{
						for(i=0;i<dataList.length;i++) {
							var index = i + 1;
							bodeContent +="<tr><td>"+ index +"</td>"
									+"<td>"+dataList[i].channel_parent_code+"</td>"
									+"<td>"+ dataList[i].channel_code +"</td>"
									+"<td>"+dataList[i].page_code+"</td>"
									+"<td>"+dataList[i].amount+"</td>"
									+"<td>"+rate(dataList[i].bounce_amount,dataList[i].amount)+"%</td></tr>";
						}
					}
				}
				$("#rankTrTab").append(trContent);
				$("#rankBodyTab").append(bodeContent);
			}
		});
	}

	function rate(molecular,denominator){
		if(denominator == 0){
			return 0;
		}else{
			return Math.round(molecular / denominator * 10000) / 100.00;
		}
	}
	//分页
	function showPage(param){
		var chooseTime=$("#config-demo2").val();
		var flow_type = $("input[name='page_type_flow2']:checked").val();
		var ismatch= $("input[name='isMatch']:checked").val();
		var plat_form =$("#plat_form2").val();//平台
		var channel1 = $("#channel21").val();
		var channel2 = $("#channel22").val();
		var currentPage=$("#currentPage").val();
		var page_size=$("#page_size").val();
		var page_total=$("#page_total").val();
		if('firstPage'==param)
		{
			currentPage =1;
		}
		else if('prePage'==param)
		{
			currentPage=currentPage==1?1:eval(currentPage+"-1");
		}
		else if('nextPage'==param)
		{
			currentPage = currentPage==page_total?page_total:eval(currentPage + "+1");
		}
		else if('lastPage'==param)
		{
			currentPage = page_total;
		}
		queryList(chooseTime,ismatch,plat_form,currentPage,page_size,channel1,channel2,flow_type);
	}


	function getChannelChild(parent_id,num){
		//获取外部渠道子集
		$.ajax({
			url : '${rc.contextPath}/traffic/getChildCodeList',
			type : "POST",
			data : {
				parent_id : parent_id
			},
			success:function(data) {
				var html="<option value='' selected>全部</option>";
				var apendhtml = "";
				var list = data.codeList;
				for(var i=0;i<list.length;i++){
					var value = list[i].id +"_" + list[i].code;
					apendhtml += '<option value="'+ value +'">'+list[i].name+'</option>';
				}
				if(num == 1){
					if(apendhtml == ""){
						$("#channel1").hide();
					}else{
						$("#channel1").empty();
						$("#channel1").html(html+apendhtml);
						$("#channel1").chosen("destroy").chosen();
					}
				}else if(num == 21){
					if(apendhtml == ""){
						$("#channel21").hide();
					}else{
						$("#channel21").empty();
						$("#channel21").html(html+apendhtml);
						$("#channel21").chosen("destroy").chosen();
					}
				}else if(num == 2){
					if(apendhtml == ""){
						$("#channel2").hide();
					}else{
						$("#channel2").empty();
						$("#channel2").html(html+apendhtml);
						$("#channel2").chosen("destroy").chosen();
					}
				}else if(num == 22){
					if(apendhtml == ""){
						$("#channel22").hide();
					}else{
						$("#channel22").empty();
						$("#channel22").html(html+apendhtml);
						$("#channel22").chosen("destroy").chosen();
					}
				}
			},
			error:function(data) {
			}
		});
	}

	function displaySelectBox(type){
		if(type == "outFlow"){
			$("#channel22").attr("disabled",true);
			$("#selectChannel21").show();
			$("#selectChannel22").show();
			$("#selectPlatform2").hide();
			$("#plat_form2").val("");
			getChannelChild(3,21);
		}else{
			$("#selectPlatform2").show();
			$("#selectChannel21").hide();
			$("#selectChannel22").hide();
		}
		$('.chosen-select').chosen("destroy").chosen();
		$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
	}

	function changeChannel1(obj){
		if($(obj).val()==""){
			$("#channel2").attr("disabled",true);
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: false });
		}else{
			$("#channel2").attr("disabled",false);
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			var parent_id = $(obj).val().split("_")[0];
			getChannelChild(parent_id,2);
		}
	}

	function changeChannel2(obj){
		if($(obj).val()==""){
			$("#channel22").attr("disabled",true);
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: false });
		}else{
			$("#channel22").attr("disabled",false);
			$('.chosen-select').chosen("destroy").chosen();
			$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			var parent_id = $(obj).val().split("_")[0];
			getChannelChild(parent_id,22);
		}
	}

	$('.show-details-btn').on('click', function(e) {
		e.preventDefault();
		if($(this).find(ace.vars['.icon']).hasClass('fa-angle-double-down')){
			$('#chart-div').show();
		}else{
			$('#chart-div').hide();
		}
		$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-up').toggleClass('fa-angle-double-down');
	});
	
	function sortByRate(){
		var sort = $("#sort").val();
		if(sort==1){
			$("#sortClass").attr("class","sorting_asc");
			$("#sort").val(0);
		}else{
			$("#sortClass").attr("class","sorting_desc");
			$("#sort").val(1);
		}
		searchClick();
	}
	
</script>
</body>
</html>